<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>

    var 切片大小=(1024*1024)*10;//确定分片大小
    var xmt=new XMLHttpRequest();//axaj请求
    function updata(index) {//index是上传标记的序列

        var file=document.getElementById("文件").files[0];//获取文件
        let {fname ,fext}=file.name.split('.');//获取文件的名字和拓展名
        var star=index*切片大小;//切片的起点
        if(star>file.size)//判断起点是否已经超过文件的长度，超过说明已经
        {
            return;
        }
            var 信息={
                "上传是否成功":"",
                "index":""

        }

        var bool=file.slice(star,star+切片大小);//slice（分割起点，分割终点）是js切割文件的函数，
        var boolname=fname+index+fext
        var boolfile=new File([bool],boolname)//把分割后的快转成文件传输
        var from=new FormData();//定义集合方便后端接收

        from.append("切片序列", index);
        from.append("切片长度", 切片大小);
        from.append("name",file.name)
        from.append("file",boolfile);


        xmt.open("post","/上传文件",true)//发送请求
        xmt.send(from)//携带集合
        xmt.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //alert(this.responseText)

                 信息= JSON.parse(this.responseText)

                if ( 信息.上传是否成功==1){//按顺序上传，只有上一片上传成功下一个才能上传
                    //这里可以加个判断，获取断点，获取后下一个，后端也会判断切片是否已经下载过


                    updata(++信息.index);
                    document.getElementById("显示").value=star/file.size;//显示上传的进度

                }else if(信息.上传是否成功==0){
                     updata(++信息.index);
                    document.getElementById("显示").value=(++信息.index*切片大小)/file.size;//显示上传的进度
                }




            }
        };

    }



</script>
<body>
<div>
    <input type="file" name="选择文件" id="文件">
    <input type="button" value="确定" onclick="updata(0)">
    <br>
    <input type="text" id="显示">
</div>
<div>
    <input type="button" name="新建" id="新建">
    <div class="新建选择">
     <input type="button" name="文件夹">
        <input type="button" name="文件">


    </div>
</div>

</body>
</html>